<template>
  <div class="list">
    <div class="event">
      <!-- 搜索 -->
      <elSearch
      :Elsearch="Elsearch"
      :searchBtn="searchBtn"
      @searchBtn="searchBtn"
      ></elSearch>
      <!-- 表格 -->
      <tableList
      :borderList="borderList"
      :tableData="tableData"
      ></tableList>
      <!-- 分页 -->
      <elPageList
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :ElPageList="ElPageList"
      ></elPageList>
      <!-- 表单 -->
      <ElFromSubmit
      ref="FromSubmit"
      :formLIst="formLIst"
      :scope="scope"
      @handelConfirm="handelConfirm"
      ></ElFromSubmit>
    </div>
  </div>
</template>

<script>
import ElFromSubmit from '../grounding/ElFromSubmit/index.vue'
import tableList from './tableList.vue'
import { commentListDelete, commentList, orderReply } from '@/api/comment.js'
export default {
  name: 'List',
  components: {
    tableList,
    ElFromSubmit
  },
  data () {
    return {
      // 搜索框
      Elsearch: [
        {
          id: 1,
          type: 'input',
          placeholder: '请输入用户ID',
          class: 'w-[160px] pr-[10px]',
          size: 'mini',
          value: null,
          name: 'userId'
        },
        {
          id: 3,
          type: 'input',
          placeholder: '请输入商品ID',
          class: 'w-[160px] pr-[10px]',
          size: 'mini',
          value: null,
          name: 'valueId'
        }
      ],
      // 搜索按钮
      searchBtn: [
        {
          id: 1,
          type: 'primary',
          icon: 'el-icon-search',
          name: '查找',
          size: 'mini',
          handler: this.SearchBtn
        },
        {
          id: 3,
          type: 'primary',
          icon: 'el-icon-download',
          name: '导出',
          size: 'mini',
          handler: this.addExport
        }
      ],
      // 表格数据
      borderList: [
        {
          id: 1,
          prop: 'userId',
          label: '用户ID'
        },
        {
          id: 2,
          prop: 'valueId',
          label: '商品ID'
        },
        {
          id: 3,
          prop: 'star',
          label: '打分'
        },
        {
          id: 4,
          prop: 'content',
          label: '评论内容'
        },
        {
          id: 5,
          prop: 'picUrls',
          label: '评论图片',
          type: 'picUrls',
          class: 'w-[40px] h-[40px]'
        },
        {
          id: 6,
          prop: 'updateTime',
          label: '时间'
        },
        {
          id: 7,
          label: '操作',
          type: 'button',
          btn: [
            {
              id: 1,
              name: '回复',
              handler: this.tableEdit
            },
            {
              id: 2,
              name: '删除',
              type: 'danger',
              handler: this.tableElete
            }
          ]
        }
      ],
      // 分页
      pages: {
        page: 1,
        limit: 10
      },
      // 分页框架
      ElPageList: {
        pageSizes: [10, 20, 30, 40],
        pageSize: 100,
        layout: 'total, sizes, prev, pager, next, jumper',
        currentPage: 1
      },
      // 回复
      tableData: [],
      formLIst: {
        title: '回复',
        formLIst: [
          {
            id: 1,
            name: '回复内容',
            placeholder: '请输入回复内容',
            size: 'mini',
            rows: '2',
            value: null,
            pop: 'content',
            type: 'textarea'
          }
        ]
      },
      scope: null
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () {
    // 表格数据
    this.getBorderList()
  },
  methods: {
    // 表格数据
    getBorderList () {
      const params = {
        page: this.pages.page,
        limit: this.pages.limit,
        sort: 'add_time',
        order: 'desc'
      }
      commentList(params).then(res => {
        const { data: { list } } = res
        this.tableData = list
      })
    },
    // 搜索按钮
    SearchBtn () {
      const ElsearchList = this.Elsearch.map(item => ({ [item.name]: item.value }))
      const ElsearchLists = Object.assign({}, ...ElsearchList)
      this.$emit('search', ElsearchLists)
      const params = {
        page: this.pages.page,
        limit: this.pages.limit,
        sort: 'add_time',
        order: 'desc'
      }
      commentList({ ...params, ...ElsearchLists }).then(res => {
        const { data: { list } } = res
        this.tableData = list
        console.log(this.tableData)
      })
    },
    // 导出按钮
    addExport (row) {
      console.log(row)
    },
    // 回复
    tableEdit (event, scope, btn) {
      this.scope = scope
      this.$refs.FromSubmit.onOpen()
    },
    // 回复确定按钮
    handelConfirm (scope) {
      const ElsearchList = this.formLIst.formLIst.map(item => ({ [item.pop]: item.value }))
      const ElsearchLists = Object.assign({ commentId: scope.row.id }, ...ElsearchList)
      console.log(ElsearchLists)
      orderReply(ElsearchLists).then(res => {
      })
      const formLIst = this.formLIst.formLIst
      formLIst.forEach(item => {
        item.value = null
      })
    },
    // 删除
    async tableElete (event, scope, btn) {
      await commentListDelete(scope.row)
      this.getBorderList()
    },
    // 条数
    handleSizeChange (val) {
      this.pages.limit = val
      this.getBorderList()
    },
    // 页数
    handleCurrentChange (val) {
      this.pages.page = val
      this.getBorderList()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
